<template>
	
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :where="udbWhere" collection="test"
			 @load="isLoading == false" @error="isLoading == false"
			field="title,_id,imgSrc,info,score" :page-size="10">
			<uni-list>
				<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
					@click="handleItemClick(item)">
					<template v-slot:body>
						<view class="item">
							<image :src="item.imgSrc" mode="aspectFill" class="img"></image>
							<text style="font-size: 14px;">{{item.title}}</text>
							<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
								:threshold="[0, 0]" />
						</view>
					</template>
					<template v-slot:footer>
						<view v-show="item.info != undefined">
							<view v-if="item.info.score != null">
								<uni-rate :value="item.info.score/2" :touchable="false" :size="14" readonly="true" activeColor="#FFAC2D" allowHalf="true" v-if="item.info.score > 0"/>
								<text v-else>未上映</text>
								<span class="rate" v-if="item.info.score>0">{{item.info.score}}</span>
								<view class="info">
									<text>{{item.info.duration}}  {{item.info.region}}</text>
									<text>{{item.info.director}} </text>
									<text>{{item.info.actors}} </text>
								</view>
							</view>
							<view v-if="item.info[0] != null">
								
									<uni-rate :value="item.score/2" :touchable="false" :size="14" readonly="true" activeColor="#FFAC2D" allowHalf="true" v-if="item.score > 0"/>
									<text v-else>未上映</text>
									<span class="rate">{{item.score}}</span>
								<view class="info">
									<text>{{item.info[0]}}</text>
									<text>{{item.info[1]}} </text>	
								</view>
							</view>
							
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		
			<uni-fab  @trigger="delLogs" :pattern="pattern" :content="content"></uni-fab>
		 <!-- <button type="warn" class="cover" @click="delLogs" show-message-card="true">清空历史记录</button> -->
			<uni-load-state @networkResume="refreshData" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
		</unicloud-db>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				pattern: {
								color: 'gray',
								backgroundColor: '#FFFFFF',
								selectedColor: '#007AFF',
								buttonColor:'red'
							},
				content: [
					{
						iconPath: '/static/uni-center/delete.png',
						selectedIconPath: '/static/uni-center/delete.png',
						text: '清空历史',
						active: false
					}
				],
				isLoading: true,
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: '',
				},
				readNewsLog:[],
				udbWhere:''
			}
		},
		async onLoad() {
			this.refreshData()			
		},
		onPullDownRefresh() {
			this.refreshData();
		},
		// onReachBottom() {
		// 	this.$refs.udb.loadMore()
		// },
		methods: {
			delLogs(){
				// uni.setStorageSync('readNewsLog',[])
				uni.showModal({
					content: '是否清空历史记录',
					success: function (res) {
						if (res.confirm) {
							uni.setStorageSync('readNewsLog',[])
							this.$refs.udb.dataList = []
							this.refreshData()
						} else if (res.cancel) {
							return '哈哈'
						}
					}
				});
				
			},
			async refreshData() {
				// this.$refs.udb.loadData({
				// 	clear: true
				// }, (res) => {
				// 	console.log(res);
				// 	uni.stopPullDownRefresh()
				// })
				const db = uniCloud.database();
				const dd = uniCloud.database()
				const dbCmd = db.command
				const mdb = db.collection('movie-list')
				const mdb2 = dd.collection('movie')
				
				this.readNewsLog = uni.getStorageSync('readNewsLog')||[];
				let readNewsLogIds = this.readNewsLog.map(({_id})=>_id)
				  
					let res = await mdb.where({"_id":dbCmd.in(readNewsLogIds)}).get()
					let res2 = await mdb2.where({"_id":dbCmd.in(readNewsLogIds)}).get()
					//如果不使用await则查询返回一个Promise对象，不好处理，await的如果是一个Promise，则直接获得Promise中的结果而不是对象本身。
						let newData = res.result.data
						let newData2 = res2.result.data
						newData.push(...newData2)
						this.$refs.udb.dataList = newData //通过给udb对象中的数据列表dataList添加新的数，就可以实现上拉时加载	
			},
			handleItemClick(item) {
				if(item.info.score != null){
					uni.navigateTo({
						url: '/pages/list/detail?id=' + item._id + '&title=' + item.title
					})
				}else{
					uni.navigateTo({
						url: '/pages/grid/detail/detail?id=' + item._id + '&title=' + item.title
					})
				}
				
			}
		}
	}
</script>

<style>
	.item{
		display: flex;
		flex-direction: column;
	}
	.article-date {
		color: #C8C7CC;
		font-size: 13px;
	}
	.img {
		width: 108px;
		height: 155px;
		margin-right: 20rpx;
		border-radius: 5px;
	}
	
	.info{
		flex-direction:column;
		/* justify-content: space-between; */
		font-size: 13px;
	}
	
	.cover {
		font-size: 12px;
		height: 30%;
    width: 40%;
		position: relative;
		right: -100px;
		top: -2000px;
		margin-bottom: -50px;
		/* #ifndef APP-NVUE */
		z-index: 999;
		/* #endif */
	}
</style>
